<template>
	<div class="create_act">
		<x-header @on-click-back="forward" title="创建活动" :left-options="{backText: '',preventGoBack:true}">
			<a slot="right" style="color: #fff;" @click="mustRead">创建必读</a>
		</x-header>
		<div class="content">
			<div class="config_suggest">
				<img src="../../assets/images/activity/note.png" alt="" />
				<div>
					<p>活动配置建议</p>
					<p>店外发券活动配置的优惠券为互斥券，互斥券与满减活动不可同时享受，不会花费您双份活动成本，因此建议对照满减活动进行配置，若券面额大于同档位满减面额，平台会加大次券发放力度。</p>
				</div>
			</div>
			<div class="set_times">
				<div class="set_time_text">
					<p>
						<img src="../../assets/images/statistics/blue2.jpg" alt="" />
						<span>设置活动时间</span>
					</p>
				</div>
				<div class="set_time_info">
					<div class="set_time_info_1">
						<p>
							<span>开始日期</span>
							<img src="../../assets/images/activity/question.png" alt="" />
						</p>
						<div></div>
						<p>{{ differ_days }}天</p>
						<div></div>
						<p>
							<span>结束日期</span>
							<img src="../../assets/images/activity/question.png" alt="" />
						</p>
					</div>
					<div class="set_time_info_2">
						<div class="start_time">
							<group>
								<datetime placeholder="请选择开始日期" v-model="value1" @on-change="change1" @on-cancel="log1('cancel')" @on-confirm="onConfirm1" @on-hide="log1('hide', $event)"></datetime>
							</group>
						</div>
						<div class="end_time">
							<group>
								<datetime placeholder="请选择结束日期" v-model="value2" @on-change="change2" @on-cancel="log2('cancel')" @on-confirm="onConfirm2" @on-hide="log2('hide', $event)"></datetime>
							</group>
						</div>
					</div>
				</div>
			</div>
			<div class="set_tickets">
				<div class="set_tickets_advice">
					<p>
						<img src="../../assets/images/activity/sound.png" alt="" />
						<span>建议与满减活动对标，不会花费双倍活动成本</span>
					</p>
				</div>
				<div class="ticket_data" v-for="(item,index) in ticketData" :key="index">
					<!-- 优惠券1 -->
					<div class="set_ticket_one" v-if="index===0">
						<div class="set_ticket_one_text">
							<p>
								<img src="../../assets/images/statistics/blue2.jpg" alt="" />
								<span>设置优惠券{{ index+1 }}</span>
							</p>
							<p v-if="ticketData.length>1" @click="dels">删除</p>
						</div>
						<div class="set_ticket_one_use">
							<p>使用门槛</p>
							<input type="text" v-model.trim="input1_1" />
						</div>
						<div class="explain">门店近30天客单价为66元，建议值53-66元</div>
						<div class="set_ticket_one_fee">
							<p>优惠金额</p>
							<input type="text" v-model.trim="input1_2" />
						</div>
						<div class="explain">门店近30天客单价为66元，建议值3-7元</div>
						<!-- 库存数量 -->
						<div v-if="is_rotate1">
							<div class="stock">
								<p>库存数量(张)</p>
								<input type="text" v-model.trim="input1_3" />
							</div>
							<div class="users">
								<p>可领用户</p>
								<div>
									<mt-checklist v-model="value11" :options="options11">
									</mt-checklist>
								</div>
							</div>
							<div class="valid_date" @click="show11=true">
								<p>使用有效期</p>
								<span>{{ input11 }}</span>
								<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
							</div>
							<div class="select_day" v-if="show11">
								<div class="text">
									<span @click="show11=false">取消</span>
									<h5>选择有效期</h5>
									<p @click="finish11">完成</p>
								</div>
								<picker :data='years11' v-model='year11' @on-change='change11'></picker>
							</div>
							<div class="ticket_type">
								<p>优惠券类型</p>
								<p>互斥券（不可与满减、折扣商品、第二份半价活动优惠同时享受）</p>
							</div>
						</div>
						<div class="advanced_config" @click="goSet1">
							<p>
								<span>高级配置</span>
								<img :class="{rotates:is_rotate1}" src="../../assets/images/activity/down.jpg" alt="" />
							</p>
						</div>
					</div>
					<!-- 优惠券2 -->
					<div class="set_ticket_one" v-if="index===1">
						<div class="set_ticket_one_text">
							<p>
								<img src="../../assets/images/statistics/blue2.jpg" alt="" />
								<span>设置优惠券{{ index+1 }}</span>
							</p>
							<p v-if="ticketData.length>1" @click="dels">删除</p>
						</div>
						<div class="set_ticket_one_use">
							<p>使用门槛</p>
							<input type="text" v-model.trim="input2_1" />
						</div>
						<div class="explain">门店近30天客单价为66元，建议值53-66元</div>
						<div class="set_ticket_one_fee">
							<p>优惠金额</p>
							<input type="text" v-model.trim="input2_2" />
						</div>
						<div class="explain">门店近30天客单价为66元，建议值3-7元</div>
						<!-- 库存数量 -->
						<div v-if="is_rotate2">
							<div class="stock">
								<p>库存数量(张)</p>
								<input type="text" v-model.trim="input2_3" />
							</div>
							<div class="users">
								<p>可领用户</p>
								<div>
									<mt-checklist v-model="value22" :options="options22">
									</mt-checklist>
								</div>
							</div>
							<div class="valid_date" @click="show22=true">
								<p>使用有效期</p>
								<span>{{ input22 }}</span>
								<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
							</div>
							<div class="select_day" v-if="show22">
								<div class="text">
									<span @click="show22=false">取消</span>
									<h5>选择有效期</h5>
									<p @click="finish22">完成</p>
								</div>
								<picker :data='years22' v-model='year22' @on-change='change22'></picker>
							</div>
							<div class="ticket_type">
								<p>优惠券类型</p>
								<p>互斥券（不可与满减、折扣商品、第二份半价活动优惠同时享受）</p>
							</div>
						</div>
						<div class="advanced_config" @click="goSet2">
							<p>
								<span>高级配置</span>
								<img :class="{rotates:is_rotate2}" src="../../assets/images/activity/down.jpg" alt="" />
							</p>
						</div>
					</div>
					<!-- 优惠券3 -->
					<div class="set_ticket_one" v-if="index===2">
						<div class="set_ticket_one_text">
							<p>
								<img src="../../assets/images/statistics/blue2.jpg" alt="" />
								<span>设置优惠券{{ index+1 }}</span>
							</p>
							<p v-if="ticketData.length>1" @click="dels">删除</p>
						</div>
						<div class="set_ticket_one_use">
							<p>使用门槛</p>
							<input type="text" v-model.trim="input3_1" />
						</div>
						<div class="explain">门店近30天客单价为66元，建议值53-66元</div>
						<div class="set_ticket_one_fee">
							<p>优惠金额</p>
							<input type="text" v-model.trim="input3_2" />
						</div>
						<div class="explain">门店近30天客单价为66元，建议值3-7元</div>
						<!-- 库存数量 -->
						<div v-if="is_rotate3">
							<div class="stock">
								<p>库存数量(张)</p>
								<input type="text" v-model.trim="input3_3" />
							</div>
							<div class="users">
								<p>可领用户</p>
								<div>
									<mt-checklist v-model="value33" :options="options33">
									</mt-checklist>
								</div>
							</div>
							<div class="valid_date" @click="show33=true">
								<p>使用有效期</p>
								<span>{{ input33 }}</span>
								<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
							</div>
							<div class="select_day" v-if="show33">
								<div class="text">
									<span @click="show33=false">取消</span>
									<h5>选择有效期</h5>
									<p @click="finish33">完成</p>
								</div>
								<picker :data='years33' v-model='year33' @on-change='change33'></picker>
							</div>
							<div class="ticket_type">
								<p>优惠券类型</p>
								<p>互斥券（不可与满减、折扣商品、第二份半价活动优惠同时享受）</p>
							</div>
						</div>
						<div class="advanced_config" @click="goSet3">
							<p>
								<span>高级配置</span>
								<img :class="{rotates:is_rotate3}" src="../../assets/images/activity/down.jpg" alt="" />
							</p>
						</div>
					</div>
				</div>
				<div class="add_btn" v-if="ticketData.length<3">
					<x-button @click.native="addT" style="border:1px solid #00ae97;color:#00ae97;background:#fff;">添加优惠券</x-button>
				</div>
				<div v-else class="maximum">最多添加3张优惠券，已到上限</div>
			</div>
			<footer>
				<div class="footer_left">
					<img @click="check_select" v-if="is_select" src="../../assets/images/activity/check.png" alt="" />
					<img @click="check_select" v-else src="../../assets/images/activity/check_grey.png" alt="" />
					<div>
						<p>已同意并阅读</p>
						<p @click="goProtocol">《商家自营销协议》</p>
					</div>
				</div>
				<div :class="{footer_gray_btn:!is_select}" @click="ensureCreate">确认创建</div>
			</footer>
		</div>
		<alert v-model="show1" title="提示" @on-show="onShow" @on-hide="onHide">{{alert_title}}</alert>
		<!-- 创建必读阴影 -->
		<div class="mask" v-if="showShadow">
		</div>
		<div class="mask_contents" v-if="showShadow">
			<div class="mask_content">
				<div class="mask_title">创建必读</div>
				<div class="mask_concept">
					<div>●&nbsp;什么是【店外发券】活动？</div>
					<p>店外发券是一种营销活动类型，活动生效后平台会通过算法将商家配置的优惠券通过分享、天降红包（仅限未开通揽客宝城市）、美团领券中心等渠道发放给匹配的目标用户；</p>
				</div>
				<div class="mask_concept">
					<div>●【店外发券】活动有什么作用？</div>
					<p>店外发券活动可帮您的店铺触达店外渠道的额外用户；由于店外发券活动与满减活动不可同时享受，不会花费双份成本，因此建议将券门槛（等于满减）及券面额（略高于满减）对照满减活动进行配置，增强吸引力。</p>
				</div>
				<div class="attention">*重要：为保证活动效果，配置的券面额一定要比对应满减的金额大，平台才会发放。</div>
			</div>
			<img @click="checks" src="../../assets/images/activity/close.png" alt="" />
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	import { XHeader, Datetime, Group, XButton, Alert, Popup, XInput, Checker, CheckerItem, Picker } from 'vux';
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	export default {
		name: 'create_act',
		data() {
			let years11 = [];
			let years22 = [];
			let years33 = [];
			for(let i = 1; i <= 7; i++) {
				years11.push(i + '日内有效');
				years22.push(i + '日内有效');
				years33.push(i + '日内有效');
			}
			return {
				value1: '', //开始时间
				value2: '', //结束时间				
				input1_1: 30, //第一张券的使用门槛
				input1_2: 3, //第一张券的优惠金额
				input1_3: 3000, //第一张券的库存张数
				input2_1: 50, //第二张券的使用门槛
				input2_2: 5, //第二张券的优惠金额
				input2_3: 3000, //第二张券的库存张数
				input3_1: 80, //第三张券的使用门槛
				input3_2: 8, //第三张券的优惠金额
				input3_3: 3000, //第三张券的库存张数
				is_rotate1: false,
				is_rotate2: false,
				is_rotate3: false,
				is_show1: true,
				is_show2: true,
				is_show3: true,
				is_select: true,
				show1: false,
				alert_title: '',
				showShadow: false,
				ticketData: [1,1,1],
				demo1Checkbox: [],
				value11: ['new','old'], //可领用户
				options11: [{
						label: '新客',
						value: 'new',
					},
					{
						label: '老客',
						value: 'old',
					}
				],
				show11: false,
				years11: [years11],
				year11: ['7日内有效'],
				input11: '7日内有效',
				input_11: '',
				value22: ['new','old'],
				options22: [{
						label: '新客',
						value: 'new',
					},
					{
						label: '老客',
						value: 'old',
					}
				],
				show22: false,
				years22: [years22],
				year22: ['7日内有效'],
				input22: '7日内有效',
				input_22: '',
				value33: ['new','old'],
				options33: [{
						label: '新客',
						value: 'new',
					},
					{
						label: '老客',
						value: 'old',
					}
				],
				show33: false,
				years33: [years11],
				year33: ['7日内有效'],
				input33: '7日内有效',
				input_33: '',
				flagss: true, //防止重复提交
				params: '',
			}
		},
		components: {
			XHeader,
			Datetime,
			Group,
			XButton,
			Alert,
			Popup,
			XInput,
			Checker,
			CheckerItem,
			Picker
		},
		computed: {
			//相差的天数
			differ_days() {
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于开始日期';
				}
				if(days !== days || days <= 0) {
					return 0;
				} else {
					return parseInt(days / (1000 * 60 * 60 * 24));
				}
			},
		},
		created() {
			if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'))
	        }else{
	        	setCookie('user_product_id','')
	        }
	      	if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'))
	        }else{
	        	setCookie('uid','')
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'))
	        }else{
	        	setCookie('token','')
	        }
			this.params = '?user_product_id='+getCookie('user_product_id')+'&uid='+getCookie('uid')+'&token='+getCookie('token');
			
			let dd1 = new Date();
			let dd2 = new Date();
			dd2.setDate(dd2.getDate() + 30);
			this.value1 = this.formats(dd1.getTime());
			this.value2 = this.formats(dd2.getTime());
		},
		methods: {
			//返回
			forward() {
				let self = this;
				this.$vux.confirm.show({
					content: '活动配置还未保存，是否确定退出?',
					confirmText: '退出',
					onConfirm() {
						self.$router.go(-1);
					}
				})
			},
			//创建必读
			mustRead() {
				this.showShadow = true;
			},
			checks() {
				this.showShadow = false;
			},
			change1(val) {

			},
			log1(val) {

			},
			onConfirm1(val) {
				this.value1 = val;
			},
			change2(val) {

			},
			log2(val) {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择开始日期';
				}
				this.value2 = val;
			},
			onShow() {

			},
			onHide() {
				this.value1 = this.value2 = '';
			},
			//高级配置1
			goSet1() {
				this.is_rotate1 = !this.is_rotate1;
			},
			//高级配置2
			goSet2() {
				this.is_rotate2 = !this.is_rotate2;
			},
			//高级配置3
			goSet3() {
				this.is_rotate3 = !this.is_rotate3;
			},
			//添加优惠券
			addT() {
				this.ticketData.push(1);
			},
			//删除
			dels() {
				this.ticketData.pop();
			},
			//同意协议
			check_select() {
				this.is_select = !this.is_select;
			},
			finish11() {
				this.show11 = false;
				this.input11 = this.input_11;
			},
			change11(val) {
				this.input_11 = val.join();
			},
			finish22() {
				this.show22 = false;
				this.input22 = this.input_22;
			},
			change22(val) {
				this.input_22 = val.join();
			},
			finish33() {
				this.show33 = false;
				this.input33 = this.input_33;
			},
			change33(val) {
				this.input_33 = val.join();
			},
			//协议
			goProtocol() {
				this.$router.push('/protocol');
			},
			//格式化
			formats(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
			//确认创建
			ensureCreate() {
				if(this.input1_1 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入使用门槛'
					});
					return;
				}
				if(this.input1_2 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入使用金额'
					});
					return;
				}
				if(this.input1_3 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入库存数量'
					});
					return;
				}
				if(this.value11 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请选择可领用户'
					});
					return;
				}
				if(this.ticketData.length > 1) {
					if(this.input2_1 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入优惠券2的使用门槛'
						});
						return;
					}
					if(this.input2_2 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入优惠券2的使用金额'
						});
						return;
					}
					if(this.input2_3 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入优惠券2的库存数量'
						});
						return;
					}
					if(this.value22 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请选择优惠券2的可领用户'
						});
						return;
					}
					if(this.ticketData.length === 3){
						if(this.input3_1 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入优惠券3的使用门槛'
						});
						return;
					}
					if(this.input3_2 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入优惠券3的使用金额'
						});
						return;
					}
					if(this.input3_3 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入优惠券3的库存数量'
						});
						return;
					}
					if(this.value33 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请选择优惠券3的可领用户'
						});
						return;
					}
					}
				}								
				if(!this.flagss) {
					return false;
				}
				let obj = {};
				let ticketArr = [];
				let obj1 = {};
				let obj2 = {};
				let obj3 = {};
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				obj.start_time = s1.getTime();
				obj.end_time = s2.getTime();
				obj1.door = +this.input1_1;
				obj1.money = +this.input1_2;
				obj1.stock = +this.input1_3;
				obj1.user = this.value11.join();
				let reg1 = /[0-9]/g;
				obj1.valid = +this.input11.match(reg1)[0];
				ticketArr.push(obj1);
				if(this.ticketData.length > 1) {
					obj2.door = +this.input2_1;
					obj2.money = +this.input2_2;
					obj2.stock = +this.input2_3;
					obj2.user = this.value22.join();
					let reg2 = /[0-9]/g;
					obj2.valid = +this.input22.match(reg2)[0];
					ticketArr.push(obj2);
					if(this.ticketData.length > 2) {
						obj3.door = +this.input3_1;
						obj3.money = +this.input3_2;
						obj3.stock = +this.input3_3;
						obj3.user = this.value33.join();
						let reg3 = /[0-9]/g;
						obj3.valid = +this.input33.match(reg3)[0];
						ticketArr.push(obj3);
					}
				}				
				obj.ticket = ticketArr;
				//console.log(obj);return;
				this.$axiosPost('/coupon/Index/couponOut' + this.params, obj).then(res => {
					this.flagss = false;
					if(res.code === 200) {
						this.$vux.toast.show({
							text: '添加成功',
							position: 'middle'
						})
						setTimeout(() => this.$router.push('/actList/0'), 1500);
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.create_act {
		padding-bottom: .3rem;
		.content {
			border-bottom: 1.4rem solid #ddd;
			.config_suggest {
				display: flex;
				align-items: center;
				padding-bottom: .4rem;
				background: #fff;
				img {
					width: 1.12rem;
					height: 1.12rem;
					margin: 0 .3rem;
				}
				>div {
					width: 75%;
					text-align: left;
					p:nth-of-type(1) {
						font-size: .34rem;
						color: #1f1f1f;
						font-weight: 700;
						margin: .2rem 0;
					}
					p:nth-of-type(2) {
						font-size: .28rem;
						color: #999;
					}
				}
			}
			.set_times {
				height: 3.3rem;
				margin: .26rem 0;
				background: #fff;
				.set_time_text {
					display: flex;
					p {
						display: flex;
						align-items: center;
						padding: .3rem 0;
						font-size: .34rem;
						color: #1f1f1f;
						font-weight: 700;
						img {
							width: .09rem;
							height: .39rem;
							margin: 0 .3rem;
						}
					}
				}
				.set_time_info {
					.set_time_info_1 {
						display: flex;
						align-items: center;
						justify-content: space-around;
						>div {
							width: .6rem;
							height: 1px;
							border: 1px dashed #cfcfcf;
						}
						>p:nth-of-type(1),
						>p:nth-of-type(3) {
							display: flex;
							align-items: center;
							span {
								color: #666;
							}
							img {
								width: .38rem;
								height: .38rem;
								margin: .1rem;
							}
						}
						>p:nth-of-type(2) {
							border: 1px solid #e6e6e6;
							border-radius: .2rem;
							padding: 0 .15rem;
						}
					}
					.set_time_info_2 {
						display: flex;
						justify-content: space-around;
						align-items: center;					
						margin: .3rem;						
						.end_time{							
							margin-top: .15rem;
						}
					}
				}
			}
			.set_tickets {
				background: #fff;
				padding-top: .25rem;
				.set_tickets_advice {
					p {
						width: 90%;
						margin: 0 auto;
						background: #fefced;
						display: flex;
						align-items: center;
						color: #ff8c29;
						padding: .2rem;
						img {
							width: .38rem;
							height: .38rem;
							margin-right: .1rem;
						}
					}
				}
				.ticket_data {
					padding-bottom: .32rem;
					border-bottom: 1px solid #f0f0f0;
					.set_ticket_one {
						margin-top: .4rem;
						.set_ticket_one_text {
							display: flex;
							justify-content: space-between;
							margin-top: .2rem;
							p:nth-of-type(1) {
								display: flex;
								img {
									width: .09rem;
									height: .39rem;
									margin: 0 .3rem;
								}
								span {
									font-size: .34rem;
									color: #1f1f1f;
									font-weight: 700;
								}
							}
							p:nth-of-type(2) {
								margin-right: .5rem;
								color: #06c1ae;
							}
						}
						.explain {
							text-align: right;
							font-size: .23rem;
							color: #b4b4b4;
							padding-right: .5rem;
							margin-top: -.2rem;
						}
						.advanced_config {
							margin-top: .3rem;
							p {
								display: flex;
								justify-content: center;
								align-items: center;
								color: #06c1ae;
								img {
									width: .29rem;
									height: .16rem;
									margin-left: .1rem;
								}
								.rotates {
									transform: rotate(180deg);
								}
							}
						}
						.set_ticket_one_use,
						.set_ticket_one_fee,
						.stock,
						.users,
						.valid_date,
						.ticket_type {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 .5rem 0 .7rem;
							margin: .3rem 0;
							font-size: .28rem;
							color: #797979;
							input {
								width: 4.2rem;
								height: .5rem;
								border-radius: .08rem;
								border: 1px solid #e6e6e6;
								padding-left: .2rem;
								font-size: .26rem;
								color: #000;
							}
						}
						.valid_date {
							img {
								width: .24rem;
								height: .24rem;
							}
							span {
								font-size: .28rem;
								color: #cacaca;
								margin-left: -.5rem;
							}
						}
						.users {
							justify-content: flex-start;
							>div {
								margin-left: .5rem;
							}
						}
						.select_day {
							width: 7.5rem;
							position: fixed;
							bottom: 0;
							left: 0;
							background: #fff;
							z-index: 9999;
							.text {
								display: flex;
								justify-content: space-between;
								border-bottom: 1px solid #f0f0f0;
								padding: .24rem .3rem;
								span {
									font-size: .32rem;
									color: #8e8e8e;
								}
								h5 {
									font-size: .34rem;
									color: #181818;
								}
								p {
									font-size: .34rem;
									color: #00b294;
								}
							}
						}
						.ticket_type{
							p:nth-of-type(2){
								text-align: left;
								color: #333;
								width: 4.2rem;
							}
						}
					}
				}
				.add_btn {
					width: 92%;
					margin: .3rem auto 0 auto;
					padding-bottom: .3rem;
				}
				.maximum {
					padding: .3rem 0;
					color: #999;
					border-top: 1px solid #ddd;
				}
			}
			footer {
				width: 7.5rem;
				height: 1.1rem;
				background: #fff;
				z-index: 99;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: space-between;
				.footer_left {
					width: 70%;
					display: flex;
					align-items: center;
					img {
						width: .52rem;
						height: .52rem;
						margin: 0 .2rem 0 .3rem;
					}
					>div {
						text-align: left;
						p:nth-of-type(2) {
							color: #07c1ac;
						}
					}
				}
				>div:nth-of-type(2) {
					width: 30%;
					background: #06c1ae;
					color: #fff;
					line-height: 1.1rem;
				}
				.footer_gray_btn {
					background: #DCDCDC!important;
				}
			}
		}
		.mask {
			background: #000;
			opacity: .8;
			z-index: 9999;
			filter: opacity(80%);
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		.mask_contents {
			width: 80%;
			height: 75%;
			background: #fff;
			z-index: 99999;
			position: fixed;
			bottom: 0;
			right: 0;
			margin: auto;
			top: 70%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-flow: column;
			.mask_content {
				overflow: auto;
				padding-bottom: .5rem;
			}
			.mask_title {
				padding: .5rem 0;
				color: #333;
			}
			.mask_concept {
				>div {
					width: 82%;
					margin: 0 auto;
					text-align: left;
					color: #00c2ae;
				}
				>p {
					width: 75%;
					margin: .3rem auto;
					text-align: left;
					color: #999;
				}
			}
			.attention {
				width: 75%;
				margin: 0 auto;
				color: #e65454;
				text-align: left;
			}
			img {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -.8rem;
				z-index: 999999;
			}
		}
	}
</style>